﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>Smart LINKiA - Alarm History</title>
    <meta name="keywords" content="Smart Link">
    <meta name="description" content="Smart Link">

    <link href="css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=2.2.0" rel="stylesheet">
    <style>
        /* Additional style to fix warning dialog position */

        #alertmod_table_list_alarms {
            top: 900px !important;
        }

        #sfLogoFixedLayer {
            position: fixed;
            right: 0px;
            bottom: 0px;
            height: 75px;
            width: 75px;
            z-index: 9999;
        }
    </style>
</head>

<body>
    <div id="sfLogoFixedLayer">
        <img src="img/SFLogoSquareTransparent.png" style="height:75px;width:75px" />
    </div>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element" style=" text-align: center;">
                            <span>
                                <img alt="image" class="img-circle" src="img/SMARTLINK.png" width="100" height="100" />
                            </span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="http://172.16.29.188:60/fanuc2">
                                <span class="clear">
                                    <span class="block m-t-xs">
                                        <strong class="font-bold">Smart LINK<span style="font-family:'Book Antiqua';font-size:16.0pt;"></span></strong>
                                    </span>
                                </span>
                            </a>

                        </div>
                        <div class="logo-element">
                            FANUC
                        </div>
                    </li>

                    <li>
                        <a href="index.html#"><i class="fa fa-table"></i> <span class="nav-label">追溯</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="UnitListTrace.html">工件列表筛选</a>
                            </li>
                            <li>
                                <a href="UnitTrace.html">工件追溯</a>
                            </li>

                        </ul>
                    </li>
                    <li class="active">
                        <a href="index.html#"><i class="fa fa-edit"></i> <span class="nav-label">历史记录</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li class="active">
                                <a href="AlarmHistory.html">机器人报警历史</a>
                            </li>
                            <li>
                                <a href="RobotStateChanges.html">机器人状态变更历史</a>
                            </li>
                            <li>
                                <a href="ParameterChanges.html">参数变更历史</a>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>
        </nav>
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="UnitListTrace.html#"><i class="fa fa-bars"></i> </a>
                        <!--<form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                            <div class="form-group">
                                <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">
                            </div>
                        </form>-->
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li>
                            <span class="m-r-sm text-muted welcome-message">
                                <span class="m-r-sm text-muted welcome-message">
                                    <a href="AlarmHistoryEN.html" title="English">EN</a>
                                    CHN</a>
                                    <a href="http://172.16.29.188:60/fanuc2" title="返回首页"><i class="fa fa-home"></i></a><strong class="font-bold">Smart LINK</strong>
                                </span>
                        </li>


                        <li>
                            <a href="login.html">
                                <i class="fa fa-sign-out"></i> 退出
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>机器人报警历史</h2>
                </div>

            </div>
            <div class="wrapper wrapper-content  animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- form -->
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <div class="pull-left">
                                    <h5 id="titleh">筛选查询</h5>
                                </div>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content basic-search">
                                <div class="wrapper">
                                    <form class="form-horizontal ng-pristine ng-valid" method="post">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <label>检索条件：</label>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <input id="startTime" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" placeholder="YYYY-MM-DD hh:mm:ss">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input id="endTime" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" placeholder="YYYY-MM-DD hh:mm:ss">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input name="robotYHNo" id="robotYHNo" class="form-control" type="text" placeholder="机器人YH号" />
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button name="search" class="btn btn-success" onclick="Search()" type="button">检索</button>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <input name="alarmCode" id="alarmCode" class="form-control" type="text" placeholder="报警编号" />
                                                    </div>

                                                    <div class="col-md-2">
                                                        <input name="alarmMessage" id="alarmMessage" class="form-control" type="text" placeholder="报警消息" />
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input name="alarmSeverity" id="alarmSeverity" class="form-control" type="text" placeholder="报警严重度" />
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input name="alarmCause" id="alarmCause" class="form-control" type="text" placeholder="报警原因" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ibox ">
                            <div class="ibox-title">
                                <div class="pull-left">
                                    <h5 id="titleh">机器人报警列表</h5>
                                </div>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="jqGrid_wrapper">
                                    <table id="table_list_alarms"></table>
                                    <div id="pager_list_alarms"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="footer">
                <div class="pull-right">
                    <img src="img/SFlogo.png" width="200" height="40">
                    <a href="http://www.smart-flow.cn" target="_blank">SmartFlow</a>

                </div>
            </div>-->
        </div>
    </div>
    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.min.js?v=3.4.0"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>
    <!-- jqGrid -->
    <script src="js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
    <script src="js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="js/hplus.js?v=2.2.0"></script>
    <script src="js/plugins/pace/pace.min.js"></script>
    <script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!--datepicker-->
    <script src="js/plugins/layer/laydate/laydate.js"></script>
    <!--时间Formatter-->
    <script>
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        //调用： var time1 = new Date().Format("yyyy-MM-dd");var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");
    </script>
    <script>
        //外部js调用
        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>

    <!--Reload JqGrid Data Table Alarms-->
    <script>
        function reloadGridDataAlarms(jsonData) {
            $("#table_list_alarms").jqGrid('clearGridData');
            $("#table_list_alarms").jqGrid('setGridParam', { data: jsonData }
            ).trigger("reloadGrid");
        }
    </script>
    <!--JqGrid Formatter-->
    <script>
        function formatQualityGrade(cellvalue, options, rowObject) {
            if (cellvalue == "NG") {
                return "<span style=\"color:red\">" + cellvalue + "</span>";
            }
            else if (cellvalue == "Good") {
                return "<span style=\"color:green\">" + cellvalue + "</span>";
            }
            else {
                return "<span style=\"color:orange\">" + cellvalue + "</span>";
            }
        }
    </script>
    <!--Fill DataTable Alarms-->
    <script>
        function fillDataTableAlarms(mydata) {
            $("#table_list_alarms").jqGrid({
                data: mydata,
                datatype: "local",
                height: 450,
                autowidth: true,
                shrinkToFit: true,
                rowNum: 20,
                rowList: [10, 20, 30],
                colNames: ['ID', '机器人YH号', '报警代码', '报警消息', '严重度', '原因', '时间'],
                colModel: [
                    {
                        name: 'ID',
                        index: 'ID',
                        editable: false,
                        //width: 20,
                        sorttype: "int",
                        search: true
                    },
                    {
                        name: 'Robot_YH_No',
                        index: 'Robot_YH_No',
                        editable: false,
                        //width: 50,
                        sorttype: "string",
                        search: true,
                    },
                    {
                        name: 'Alarm_Code',
                        index: 'Alarm_Code',
                        editable: false,
                        //width: 30,
                        sorttype: "string",
                        search: true,
                    },
                    {
                        name: 'Alarm_Message',
                        index: 'Alarm_Message',
                        editable: false,
                        //width: 50,
                        sorttype: "string",
                        search: true
                    },
                    {
                        name: 'Alarm_Severity',
                        index: 'Alarm_Severity',
                        editable: false,
                        //width: 50,
                        sorttype: "string",
                        search: true
                    },
                    {
                        name: 'Alarm_Cause',
                        index: 'Alarm_Cause',
                        editable: false,
                        //width: 30,
                        sorttype: "string",
                        search: true
                    },

                    {
                        name: 'Time',
                        index: 'Time',
                        editable: false,
                        //width: 90,
                        sorttype: "date",
                        formater: "datetime",
                        search: true
                    },

                ],
                pager: "#pager_list_alarms",
                viewrecords: true,
                caption: "相关报警",
                add: false,
                edit: false,
                addtext: 'Add',
                edittext: 'Edit',
                hidegrid: false
            });

            // Add selection
            //$("#table_list_unitDetail").setSelection(4, true);

            // Setup buttons
            $("#table_list_alarms").jqGrid('navGrid', '#pager_list_alarms', {
                edit: false,
                add: false,
                del: false,
                search: true
            }, {
                    height: 400,
                    reloadAfterSubmit: false
                });

            // Add responsive to jqGrid
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width();
                $('#table_list_alarms').setGridWidth(width);
            });
        };
    </script>

    <!--Page ready then get last serial number alarms-->
    <script>
        $(document).ready(
            fillDataTableAlarms()
        );
    </script>

    <!--Search Button Clicked-->
    <script>
        function Search() {
            var url = "api/Alarm_History";

            var pageIndex = $(".ui-pg-input").text() == "" ? 0 : ($(".ui-pg-input").text() - 1);
            var pageSize = $("select :selected").text() == "" ? 20 : $("select :selected").text();
            var model = {
                "Robot_YH_No": $("#robotYHNo").val()
                , "Alarm_Code": $("#alarmCode").val()
                , "Alarm_Message": $("#alarmMessage").val()
                , "Alarm_Severity": $("#alarmSeverity").val()
                , "Alarm_Cause": $("#alarmCause").val()
                , "StartTime": $("#startTime").val()
                , "EndTime": $("#endTime").val()
                , "PageIndex": pageIndex
                , "PageSize": pageSize
            };
            //Clear Data Table
            reloadGridDataAlarms();
            $.ajax({
                type: "post",
                //async:false,
                contenttype: "applicaton/json;charset=utf-8",
                url: url,
                datatype: 'json',
                data: model,
                success: function (json) {
                    //var obj = eval(json);
                    //var totalPages = json.TotalPages;
                    //$(".ui-paging-info").text(totalPages);
                    if (json == null)
                    {
                        alert("没有查到数据！");
                        return;
                    }
                    reloadGridDataAlarms(json.AlarmRecords);
                    //alert(json);
                    //$("#txtid").val("OK");
                },
                error: function (xmlhttprequest, textstatus, errorthrown) {
                    //alert(xmlhttprequest.status);
                    //alert(xmlhttprequest.readystate);
                    //alert(textstatus);
                }
            })
        }
    </script>
</body>

</html>